<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control"  content="no-transform">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>添加收货地址</title>
    <link href="/statics/view/css/shop_common.css" rel="stylesheet" type="text/css" />
    <link href="/statics/view/css/shop_layout.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<!--客户端下载的图片-->
<header id="header" class="u-header clearfix">
[#if tag==null]
    <div class="u-hd-left f-left">
        <a href="javascript:void(0)" mars_sead="brand-list-back_btn" class="J_backToPrev"><span class="u-icon-px i-hd-back"></span></a>
    </div>
[/#if]
    <div class="u-hd-tit"><span>添加收货地址</span></div>
</header>

<style type="text/css">.u-footer{display:none;}</style>
<div id="addressForm" class="ui-page ui-page-edit-address">
    <form action="save" method="POST" onsubmit="return formValidate(this)">
    <div class="ui-page-content">
        <div class="ui-form ui-border-b">
                <div class="ui-form-item ui-border-b">
                    <label>收货人</label>
                    <input name="consignee" type="text" value="" maxlength="50" emptymsg="请输入您的姓名" errormsg="请填写1~16位中文姓名" datatype="c16">
                </div>
                <div class="ui-form-item ui-border-b">
                    <label>手机号</label>
                    <input name="phone" type="tel" value="" maxlength="11" emptymsg="手机号码不能为空" errormsg="手机号码格式错误" datatype="m">
                </div>
                <div class="ui-form-item ui-border-b">
                    <label>省份</label>
                    <div class="ui-select">
                        <select id="province" name="province" emptymsg="请选择省" datatype="*">
                            <option value="">请选择</option>
                            [#list areas as area]
                               <option value="${area.id}">${area.name}</option>
                            [/#list]
                        </select>
                    </div>
                </div>
                <div class="ui-form-item ui-border-b">
                    <label>城市</label>
                    <div class="ui-select">
                        <select id="city" name="city" emptymsg="请选择市" datatype="*" >
                        </select>
                    </div>
                </div>
                <div class="ui-form-item ui-border-b">
                    <label>区县</label>
                    <div class="ui-select">
                        <select id="district" name="district" emptymsg="请选择区" datatype="*">
                        </select>
                    </div>
                </div>
            <div class="ui-form-item ui-border-b">
                <label>邮编</label>
                <input id="zipCode" name="zipCode" type="text" value="" maxlength="6" placeholder="邮政编码" emptymsg="邮编错误" datatype="*">
            </div>
                <div class="ui-form-item ui-form-item-textarea">
                    <label>详细地址</label>
                    <textarea name="address" rows="5" emptymsg="请填写详细地址" datatype="*"></textarea>
                </div>

        </div>
    </div>
    <div class="ui-bottom-bar">
        <input id="addressSub" type="submit" class="add-address-submit ui-button ui-button-primary ui-button-large" mars_sead="editaddress_save_button" data-istempuser="false" data-loading-text="正在提交..." value="确定">
    </div>
    </form>
</div>

<a href="#top" class="u-backtop" mars_sead="home_foot_top_btn">
    <span class="u-icon-px i-backtop"></span>
</a>
<script src="/statics/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="/statics/layer.m/layer.m.js"></script>
<script type="text/javascript">

    $(function(){
       $("select[name='province']").change(function(){
           var pId=$(this).find("option:selected").val();
           $("#city").html("");
           $("#district").html("");
           choiceProvince("#city",pId);
       });

        $("select[name='city']").change(function(){
            var pId=$(this).find("option:selected").val();
            $("#district").html("");
            choiceProvince("#district",pId);
        });
    });

    function choiceProvince(optWrapDom,parentId){
        $.ajax({
            url: "/area/getJsonArea",
            type: "GET",
            data: {
                parentId: parentId
            },
            dataType: "json",
            cache: false,
            success: function (data) {
                if (data.type == 'success') {
                    var optionHtml = "<option value='0'>所有</option>";
                    $(data.list).each(function (index, entity) {
                        optionHtml = optionHtml + "<option value='" + entity.id + "'>" + entity.name + "</option>"

                    });
                    $(optionHtml).appendTo(optWrapDom);
                }
            }
        });
    }

    function formValidate(form){
        var $form = $(form);
        if (!$form.valid()) {
            return false;
        }
        $.ajax({
            type: form.method || 'POST',
            url:$form.attr("action"),
            data:$form.serializeArray(),
            dataType:"json",
            cache: false,
            success: function(data){
                if(data.type=='success'){
                    [#if redirectUrl??]
                       location.href = "${redirectUrl}";
                    [#else]
                       location.href = "/member/receiver/list?tag=${tag}";
                    [/#if]
                }else{
                    layer.open({
                        content: message.content,
                        time: 2
                    });
                }
            }
        });
        return false;
    }


</script>
</body>
</html>